<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <link rel="stylesheet" href="../default/css/animat.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/zy.media.min.css"/>

    <style>
        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 20px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }

        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mui-pull-top-canvas canvas {
            width: 40px;
        }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }

        .mui-slider-indicator.mui-segmented-control {
            background: #fff;
            padding: 0 10px 0 10px;
            z-index: 999;
        }

        .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
            top: 37px;
            bottom: 50px;
        }

        .mui-table-view-cell:after {
            right: 15px;
            height: 0;
        }

        .mui-table-view-cell {
            padding: 0;
            margin: 30px auto;
        }

        .mui-content {
            background: #fff;
        }

        .mui-content-padded img {
            border-radius: 5px;
        }

        .gold-coin-box {
            width: 60px;
            height: 100px;
            /*background: #fff;*/
            /*-moz-box-shadow: 0px 4px 16px #333333;*/
            /*-webkit-box-shadow: 0px 4px 16px #333333;*/
            /*box-shadow: 0px 4px 16px #333333;*/
            /*border-radius: 50%;*/
            /*-webkit-border-radius: 50%;*/
            /*-moz-border-radius: 50%;*/
            /*-ms_border-radius: 50%;*/
            display: inline-block;
            position: fixed;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/gold-coin-1.png") no-repeat;
            background-size: 100% 100%;
            right: 20px;
            bottom: 60px;
            z-index: 55;
            /*animation: heart 1.3s ease-in-out 2.7s infinite alternate;*/


            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        .rotary-animation{
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }
        @keyframes heart{
            from{transform:translate(0,0)}
            to{transform:translate(0,6px)}
        }
        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
        .hundred-buju{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .gold-coin-bo_in {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms_border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .gold-coin-bo-c {
            width: 60px;
            height: 60px;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            background: rgba(253, 194, 35, 0.7);
        }

        .zy_timeline_loaded {
            height: 3px;
        }

        .zy_timeline_current {
            height: 3px;
        }

        .zy_timeline_handle {
            z-index: 50;
        }

        .zy_timeline_slider {
            height: 3px;
        }
    </style>
</head>

<body>
<!-- 1，全都要获取视频的时间进度，然后算钱https://blog.csdn.net/sinat_35645479/article/details/79780923 -->

<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl roof-placement2"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll" id="classification-box"></div>
        </div>
        <div class="mui-slider-group">
        </div>
    </div>
</div>

<!-- 底部导航 -->

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="../../index.html">
        <span class="mui-icon icon iconfont icon-xinwen"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item mui-active " href="./video.html">
				<span class="mui-icon icon iconfont icon-shipin">
					<!-- <span class="mui-badge">9</span> --></span>
        <span class="mui-tab-label">视频</span>
    </a>
    <a class="mui-tab-item" href="./shops.html">
        <span class="mui-icon icon iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">阅读宝商城</span>
    </a>
    <a class="mui-tab-item" href="./task.html">
        <span class="mui-icon icon iconfont icon-task"></span>
        <span class="mui-tab-label">任务</span>

    </a>
</nav>


<!--阅读宝-->
<!--<div class="gold-coin-box modtai-control-show">
    <div class="gold-coin-bo_in">
        <div class="gold-coin-bo-c"></div>
        &lt;!&ndash;<div class="gold-coin-b_num">43%</div>&ndash;&gt;
    </div>
</div>-->

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/mui.pullToRefresh.js"></script>
<script src="../default/js/mui.pullToRefresh.material.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../default/js/zy.media.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../default/js/cookie.js"></script>-->
<!---->
<script>
    mui.init({

    });

    $(function () {
        newstitleClass();
    })

    // 禁用左右滑动
    // mui('.mui-slider').slider().stopped = true;
    // 监听列表的上滑事件
    mui("#slider").on('swipeup', '.mui-slider-group', function () {

    });
    // 监听列表的下滑事件
    mui("#slider").on('swipedown', '.mui-slider-group', function () {

    });
    mui('.mui-bar-tab').on('tap', 'a', function (e) {
        if($(this).is('.no')){
            mui.toast('暂未开放');
        }else{
            mui.openWindow({
                url: $(this).attr('href')
            });
        }
    });



    // 显示
    mui("body").on('tap', '.modtai-control-show', function () {
        $('.modtai-control-hied').css('display', 'block');
        $('.modtai-control-box').css('display', 'inline-table');
        $('.modtai-control-box').addClass('animated fadeInUp');
        setTimeout(function () {
            $('.modtai-control-box').removeClass('animated fadeInUp');
        }, 500)
    });
    // 隐藏
    mui("body").on('tap', '.modtai-control-hied', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });
    mui("body").on('tap', '.mui-text-right', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });

    /*// 进度条初始化
    mui("#demo1").progressbar({progress: 20}).show();
    // 更改显示进度条:
    mui("#demo1").progressbar().setProgress(50);*/


    function newstitleClass() {
        //新闻标题
        $.ajax({
            url: website + '/VideoClassificationController/queryAll',
            type: 'post',
            success: function (data) {
                // classification
                var titlehtml_ = '';
                var contenthtml_ = '';
                data.data.forEach(function (one, i) {
                    if (i == 0) {
                        titlehtml_ += '<a class="mui-control-item mui-active" href="#item' + one.classificationId + 'mobile" data-classificationId="' + one.classificationId + '">' + one.classificationName + '</a>';
                        contenthtml_ += '<div id="item' + one.classificationId + 'mobile" class="mui-slider-item mui-control-content mui-active">' +
                            '<div id="scroll' + one.classificationId + '" class="mui-scroll-wrapper">' +
                            '<div class="mui-scroll">' +
                            '<div class="box">' +
                            '<div class="mui-loading">' +
                            '<div class="mui-spinner">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    } else {
                        titlehtml_ += '<a class="mui-control-item" href="#item' + one.classificationId + 'mobile" data-classificationId="' + one.classificationId + '">' + one.classificationName + '</a>';
                        contenthtml_ += '<div id="item' + one.classificationId + 'mobile" class="mui-slider-item mui-control-content">' +
                            '<div id="scroll' + one.classificationId + '" class="mui-scroll-wrapper">' +
                            '<div class="mui-scroll">' +
                            '<div class="box">' +
                            '<div class="mui-loading">' +
                            '<div class="mui-spinner">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }

                });
                $("#classification-box").html(titlehtml_);
                $(".mui-slider-group").html(contenthtml_);
                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                logic(classificationId, 0, 0);
                mui('.mui-slider').slider();
                mui('.mu-scroll-wrapfper.slider-indicator.segmented-control').scroll({
                    scrollY: false,
                    scrollX: true,
                    indicators: false,
                    snap: '.mui-control-item'
                });
                initpullRefreshEl();
            }
        });
    }


    // 初始化下拉刷新上拉加载
    function initpullRefreshEl() {

        (function ($) {

            //阻尼系数
            var deceleration = mui.os.ios ? 0.003 : 0.0009;
            $('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: true, //是否显示滚动条
                deceleration: deceleration
            });

            $.ready(function () {

                document.getElementById('slider').addEventListener('slide', function (e) {
                    // 这里可以获得标题
                    e.preventDefault();
                    setTimeout(function () {
                        var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                        logic(classificationId, 0, 0);
                        startingNumber = 0;
                    },100)

                });
                //循环初始化所有下拉刷新，上拉加载。
                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        down: {
                            contentrefresh: '正在加载...',
                            contentnomore:'没有更多数据了',
                            callback: function () {
                                var self = this;
                                if(self.element.querySelector('.mui-table-view')==null){

                                }
                                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                                logic(classificationId, self, 1);
                            }
                        },
                        up: {
                            callback: function () {
                                var self = this;
                                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                                logic(classificationId, self, 2);
                            }
                        }
                    });
                });

            });

        })(mui);
    };

    mui('body').on('tap', '.yaoqing', function (e) {
        mui.openWindow({
            url: 'templets/html/sendfriend.html'
        });
    });

    //显示页数
    var pageSize = 15;
    //起始数
    var startingNumber = 0;

    //结尾数
    function logic(classificationId, self, index) {

        mui.showLoading("正在加载..", "div");
        if(self==0){
            startingNumber=0;
        }else{
            try {
                var ul = self.element.querySelector('.mui-table-view');
                var length = ul.querySelectorAll('li').length;
                if(length%pageSize == 0){
                    startingNumber = length;
                }else{
                    startingNumber = pageSize-length;
                }
            } catch (e) {
                self.endPullDownToRefresh(false);
                console.log(e);
            }

        }
        // 先加载必要的数据,在进行下上加载操纵
        //新闻内容
        $.ajax({
            url: website + '/VideoController/queryAll2',
            type: 'post',
            data: {
                classificationId: classificationId,
                startingNumber: startingNumber,
            },
            success: function (data) {
                var item = $(".mui-active")[1];
                if (index == 0) {
                    // 页面第一次加载操纵
                    var html = '';
                    if (item.querySelector('.mui-loading')) {
                        html += '<ul class="mui-table-view">';
                        data.data.forEach(function (one) {

                            html += '<li class="mui-table-view-cell">' +
                                '<div class="zy_media">' +
                                '<video poster="'+one.encrypted_name1+'" data-config=\'{"mediaTitle": "' + one.title + '"}\'  webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow">' +
                                '<source src="' + one.encrypted_name + '" type="video/mp4">' +
                                '您的浏览器不支持HTML5视频' +
                                '</video>' +
                                '</div>' +
                                '</li>';

                        });
                        html += '</ul>';
                        setTimeout(function () {
                            item.querySelector('.box').innerHTML = html;
                            zymedia('video');
                            mui.hideLoading();
                        }, 500);
                    };
                    mui.hideLoading();
                } else {
                    var html = '';
                    data.data.forEach(function (one) {
                        html += '<li class="mui-table-view-cell">' +
                            '<div class="zy_media">' +
                            '<video poster="'+one.encrypted_name1+'" data-config=\'{"mediaTitle": "' + one.title + '"}\'  webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow">' +
                            '<source src="' + one.encrypted_name + '" type="video/mp4">' +
                            '您的浏览器不支持HTML5视频' +
                            '</video>' +
                            '</div>' +
                            '</li>';
                    });

                    if(index == 2){
                        if (data.data.length == 0) {
                            self.endPullUpToRefresh(true);
                        } else if (data.data.length < pageSize) {
                            $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                            self.endPullUpToRefresh(true);
                            zymedia('video');
                        } else {
                            $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                            self.endPullUpToRefresh(false);
                            zymedia('video');
                        }
                    };
                    if(index == 1){
                        if (data.data.length == 0) {
                            self.endPullDownToRefresh(true);
                            self.endPullUpToRefresh(true);
                            zymedia('video');
                            mui.toast('没有更多数据了');
                        } else if (data.data.length < pageSize) {
                            $(".mui-active:eq(1)").find(".mui-table-view").prepend(html);
                            self.endPullDownToRefresh(true);
                            zymedia('video');
                            mui.toast('没有更多数据了');
                        } else {
                            $(".mui-active:eq(1)").find(".mui-table-view").prepend(html);
                            mui.toast('发现'+data.data.length+'条内容');
                            self.endPullDownToRefresh(true);
                            zymedia('video');
                        }
                    }
                    mui.hideLoading();

                }

            }
        });

    };



</script>
</body>

</html>